import { React, useEffect, useState } from 'react';
import { Button } from 'antd';
import { UserOutlined, CrownOutlined } from '@ant-design/icons';
import axios from 'axios';
import './index.css';

function UserBox() {
  const [userName, setUserName] = useState(window.sessionStorage.username || '');
  const { roleMsg } = window.sessionStorage;

  useEffect(() => {
    // axios.get('/user').then((res) => {
    //   const { username } = res.data || {};
    //   setUserName(username);
    // });
  }, []);

  const logout = () => {
    // axios.post('/user/logout').then((res) => {
    //   console.log(res);
    //   // location.href='/login';
    // });
    window.sessionStorage.loginStatus = 'logout';
    window.location.href = '/login';
  };

  return (
    <div style={{ padding: '0 10px 20px 10px' }}>
      <div className="info">
        <UserOutlined /> 
        {' '}
        { ` ${userName}` }
      </div>
      <div className="info">        
        {' '}
        <CrownOutlined />
        {' '}
        {` ${roleMsg}`}
      </div>
      <Button type="primary" onClick={logout} style={{ marginTop: '15px' }}>登出</Button>
    </div>
  );
}

export default UserBox;
